<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>开始实现 | vue-admin-doc</title>
    <meta name="description" content="vue element admin">
    <link rel="icon" href="/vue-admin/doc/logo.png">
    
    <link rel="preload" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css" as="style"><link rel="preload" href="/vue-admin/doc/assets/js/app.d64942cb.js" as="script"><link rel="preload" href="/vue-admin/doc/assets/js/3.1009c37b.js" as="script"><link rel="prefetch" href="/vue-admin/doc/assets/js/2.abdc0c9d.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/4.7d50b7a1.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/5.e95473fb.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/6.1efa8625.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/7.4fef4205.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/8.601e5cd3.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/9.2982823f.js">
    <link rel="stylesheet" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-admin/doc/" class="home-link router-link-active"><!----> <span class="site-name">vue-admin-doc</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-admin/doc/guide/" class="sidebar-link">介绍</a></li><li><a href="/vue-admin/doc/guide/base.html" class="sidebar-link">一、基本准备</a></li><li><a href="/vue-admin/doc/guide/start.html" class="active sidebar-link">二、开始实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#从入口开始" class="sidebar-link">从入口开始</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#vuex管理" class="sidebar-link">Vuex管理</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#router管理" class="sidebar-link">Router管理</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#新增两个组件" class="sidebar-link">新增两个组件</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#组装首页图表" class="sidebar-link">组装首页图表</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#来撸一个增删改查" class="sidebar-link">来撸一个增删改查</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#_1-创建基本组件" class="sidebar-link">1.创建基本组件</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#_2-插入第一个布局层layout" class="sidebar-link">2.插入第一个布局层Layout</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#_3-插入树插槽" class="sidebar-link">3.插入树插槽</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#_4-插入查询条件" class="sidebar-link">4.插入查询条件</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#_5-插入按钮组和表格和分页" class="sidebar-link">5.插入按钮组和表格和分页</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#_8-插入编辑页" class="sidebar-link">8.插入编辑页</a></li></ul></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/start.html#完成一个功能实现" class="sidebar-link">完成一个功能实现</a></li></ul></li><li><a href="/vue-admin/doc/guide/component.html" class="sidebar-link">三、组件解析</a></li><li><a href="/vue-admin/doc/guide/third.html" class="sidebar-link">四、第三方库</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="开始实现"><a href="#开始实现" aria-hidden="true" class="header-anchor">#</a> 开始实现</h1> <p>上一章节介绍了项目的基础准备和相关的依赖添加，这一节就开始具体介绍一下如何一步一步来编写后台管理系统。</p> <p>后台管理系统的主体样式参考<a href="https://preview.pro.ant.design/dashboard/analysis" target="_blank" rel="noopener noreferrer">AntDesign<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,结合
<a href="http://element-cn.eleme.io/#/zh-CN/component/installation" target="_blank" rel="noopener noreferrer">element-ui<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 库可以实现出非常漂亮统一的后台管理系统。</p> <h2 id="从入口开始"><a href="#从入口开始" aria-hidden="true" class="header-anchor">#</a> 从入口开始</h2> <p>项目的入口为src/main.js</p> <p>先来看看长什么样子</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store'</span>

Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  router<span class="token punctuation">,</span>
  store<span class="token punctuation">,</span>
  <span class="token function-variable function">render</span><span class="token punctuation">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>可以说非常精简了，话不多说，先来引入必备的组件。在<code>main.js</code>中引入以下组件和自定义的插件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ...</span>
<span class="token keyword">import</span> ElementUI <span class="token keyword">from</span> <span class="token string">'element-ui'</span>
<span class="token keyword">import</span> <span class="token string">'element-ui/lib/theme-chalk/index.css'</span>
<span class="token keyword">import</span> <span class="token string">'./assets/styles/index.scss'</span>
<span class="token keyword">import</span> MyPlugin <span class="token keyword">from</span> <span class="token string">'./plugin/MyPlugin'</span>
<span class="token comment">// ...</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementUI<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>MyPlugin<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="vuex管理"><a href="#vuex管理" aria-hidden="true" class="header-anchor">#</a> Vuex管理</h2> <p><a href="https://vuex.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">vuex<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>是vue官方的全局状态管理，为了以后更方便的管理和使用，
我们把store.js单独拉倒一个文件夹store中来管理,修改后的store.js如下</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>
<span class="token keyword">import</span> app <span class="token keyword">from</span> <span class="token string">'./modules/app'</span>
<span class="token keyword">import</span> tagsView <span class="token keyword">from</span> <span class="token string">'./modules/tagsView'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  state<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">sidebar</span><span class="token punctuation">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>app<span class="token punctuation">.</span>sidebar<span class="token punctuation">,</span>
    <span class="token function-variable function">visitedViews</span><span class="token punctuation">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>tagsView<span class="token punctuation">.</span>visitedViews<span class="token punctuation">,</span>
    <span class="token function-variable function">cachedViews</span><span class="token punctuation">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>tagsView<span class="token punctuation">.</span>cachedViews
    <span class="token comment">// menuName: state =&gt; state.permission.menuName,</span>
    <span class="token comment">// menuList: state =&gt; state.permission.menuList</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  modules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">,</span>
    tagsView
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>其中，为了区分不同类型的状态，我们将不同类型的状态分别放置在app.js、tagsView.js中，统一放置在modules文件夹中引入
由于本简版的后台管理不涉及到菜单的动态绑定，故只留两个管理作为示例说明。</p> <h2 id="router管理"><a href="#router管理" aria-hidden="true" class="header-anchor">#</a> Router管理</h2> <p><a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">Router<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>是官方的路由管理，我们也单独拉一个router文件夹来管理路由相关的操作和配置
首先先改写一下我们的基础路由</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> Router <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> Main <span class="token keyword">from</span> <span class="token string">'../views/Layout/Main'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Router<span class="token punctuation">)</span>

<span class="token comment">/**
 * router自定义配置项
 * hidden: true                   如果设置true则左侧路由菜单隐藏
 * name:'router-name'             &lt;keep-alive&gt;使用必须设置 (must set!!!)
 * meta : {
    role: true                   设置是否有权限
    title: 'title'                当前路由的中文名称
    noCache: true                 如果fasle，页面将不会被缓存(默认为false)
    icon: 'icon-file-text'        当前菜单的图标样式，使用阿里iconfont
  }
 **/</span>
<span class="token comment">// 基础路映射</span>
<span class="token keyword">const</span> <span class="token function-variable function">_401</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;errorPage&quot; */</span> <span class="token string">'../views/errorPage/401.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_403</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;errorPage&quot; */</span> <span class="token string">'../views/errorPage/403.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_404</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;errorPage&quot; */</span> <span class="token string">'../views/errorPage/404.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_500</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;errorPage&quot; */</span> <span class="token string">'../views/errorPage/500.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;main&quot; */</span> <span class="token string">'../views/Layout/Home/index.vue'</span><span class="token punctuation">)</span>
<span class="token comment">// 业务路由映射</span>
<span class="token keyword">const</span> <span class="token function-variable function">_keyBoard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;charts&quot; */</span> <span class="token string">'../views/charts/KeyBoard.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_lineMarker</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;charts&quot; */</span> <span class="token string">'../views/charts/LineMarker.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_mixChart</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;charts&quot; */</span> <span class="token string">'../views/charts/MixChart.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_tableExample</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;example&quot; */</span> <span class="token string">'../views/example/TableExample.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_richText</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;example&quot; */</span> <span class="token string">'../views/example/RichText.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_splitPanel</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;example&quot; */</span> <span class="token string">'../views/example/SplitPanel.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> constantRouterMap <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'/404'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _404<span class="token punctuation">,</span> hidden<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'/401'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _401<span class="token punctuation">,</span> hidden<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'/403'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _403<span class="token punctuation">,</span> hidden<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'/500'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _500<span class="token punctuation">,</span> hidden<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Main<span class="token punctuation">,</span>
    redirect<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
    meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-home'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
      component<span class="token punctuation">:</span> _home<span class="token punctuation">,</span>
      name<span class="token punctuation">:</span> <span class="token string">'home'</span><span class="token punctuation">,</span>
      meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-home'</span><span class="token punctuation">,</span> noCache<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> asyncRouterMap <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token comment">// 组件实例</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/example'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Main<span class="token punctuation">,</span>
    redirect<span class="token punctuation">:</span> <span class="token string">'noredirect'</span><span class="token punctuation">,</span>
    meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'演示案例'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-deploymentunit'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'tableExample'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _tableExample<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'TableExample'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'综合演示'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'richText'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _richText<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'RichText'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'富文本'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'splitPanel'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _splitPanel<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'SplitPanel'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'分隔区块'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 图表演示</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/charts'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Main<span class="token punctuation">,</span>
    redirect<span class="token punctuation">:</span> <span class="token string">'noredirect'</span><span class="token punctuation">,</span>
    meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'图表示例'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-areachart'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'keyBoard'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _keyBoard<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'KeyBoard'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'键盘图'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'lineMarker'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _lineMarker<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'LineMarker'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'折线图'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'mixChart'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _mixChart<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'MixChart'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'混合图'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 错误页面</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/errorPage'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Main<span class="token punctuation">,</span>
    redirect<span class="token punctuation">:</span> <span class="token string">'noredirect'</span><span class="token punctuation">,</span>
    meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'错误页面'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-error'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page401'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _401<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Page401'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'401'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page403'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _403<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Page403'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'403'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page404'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _404<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Page404'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'404'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page500'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _500<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'Page500'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'500'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> redirect<span class="token punctuation">:</span> <span class="token string">'/404'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  base<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token punctuation">,</span>
  <span class="token function-variable function">scrollBehavior</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  routes<span class="token punctuation">:</span> constantRouterMap<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>asyncRouterMap<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br></div></div><p>路由这块和页面展示息息相关，既然左侧的菜单栏和路由是动态板顶的，那则必须要遵循一定的规则，见上文注释部分</p> <p>基础路由则需要包含home和errorPage，这里创建相关的vue集成组件，讲路由进行拆分组合，并将基础布局Layout进行拼接，我们可以得到如下的基础布局页面</p> <p><img src="/vue-admin/doc/assets/img/init.30348e5f.jpg" alt="An Image"></p> <p>如上图所示，页面整体布局如下</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token comment">&lt;!--views/Layout/Main.vue--&gt;</span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>main-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--nav-bar--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav-bar</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav-bar</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--tags--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tags-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tags-view</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--main--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app-main<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fade<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>out-in<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span> <span class="token attr-name">:include</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>cachedViews<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>解释:</p> <ul><li>MenuBar:路由嵌套的菜单栏，可收缩</li> <li>NavBar：嵌套一个动态面包屑导航的导航栏，包含欢迎词和avatar头像区域</li> <li>TagsView：当前开启的路由/菜单 这部分用到了vuex缓存的全局状态</li> <li>AppMain：主要工作区，这部分使用到了<a href="https://cn.vuejs.org/v2/api/#keep-alive" target="_blank" rel="noopener noreferrer">keep-alive<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <p>通过路由导航的工作区主要存在于keep-alive 管理的页面app-main区块内部，如目前看到的主体部分所显示的部分即是路由Home的主体显示</p> <p>另外，我们再添加一个<strong>路由拦截器</strong>，用于做路由跳转时候进度控制和权限控制等细粒度操作。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span>
<span class="token keyword">import</span> NProgress <span class="token keyword">from</span> <span class="token string">'nprogress'</span>
<span class="token keyword">import</span> <span class="token string">'nprogress/nprogress.css'</span><span class="token comment">// progress bar style</span>
<span class="token comment">// const debug = process.env.NODE_ENV !== 'production'</span>
NProgress<span class="token punctuation">.</span><span class="token function">configure</span><span class="token punctuation">(</span><span class="token punctuation">{</span> showSpinner<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token comment">// NProgress Configuration</span>

<span class="token comment">// 权限白名单 no redirect whitelist</span>
<span class="token keyword">const</span> whiteList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token string">'/404'</span><span class="token punctuation">,</span> <span class="token string">'/401'</span><span class="token punctuation">,</span> <span class="token string">'/403'</span><span class="token punctuation">,</span> <span class="token string">'/500'</span><span class="token punctuation">]</span>

<span class="token comment">/**
 * 当前路由是否有权限
 * @param 当前路由名称
 * @returns {boolean}
 */</span>
<span class="token keyword">function</span> <span class="token function">hasPermission</span> <span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>whiteList<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span>path<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 在免登录白名单，直接进入</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  NProgress<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 如果有权限判断则进行筛选并跳转不同的权限页面</span>
  <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  NProgress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// finish progress bar</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><p>在main.js中引入</p> <p>先别着急着进行开发，下一节咱们来看看如何利用组件和已经存在的页面布局添加两个组件管理页面。</p> <h2 id="新增两个组件"><a href="#新增两个组件" aria-hidden="true" class="header-anchor">#</a> 新增两个组件</h2> <p>这节来试试添加两个组件，并利用已经存在的布局将其渲染到页面上去</p> <p>首先增加两个想要显示的功能模块如</p> <pre><code>├── views/example               // 实例代码
    │   ├── RichText            // 富文本测试页面
    │   └── SplitPanel          // 分隔窗口页面    
</code></pre> <p>两个实例创建完毕后，我们为其创建对应的路由如下</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//...</span>
<span class="token keyword">const</span> <span class="token function-variable function">_richText</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;main&quot; */</span> <span class="token string">'../views/example/RichText.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">_splitPanel</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: &quot;main&quot; */</span> <span class="token string">'../views/example/SplitPanel.vue'</span><span class="token punctuation">)</span>
<span class="token comment">//...</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> asyncRouterMap <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> <span class="token string">'/example'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Main<span class="token punctuation">,</span>
    redirect<span class="token punctuation">:</span> <span class="token string">'noredirect'</span><span class="token punctuation">,</span>
    meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'组件实例'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-gateway'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'RichText'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _richText<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'RichText'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'富文本'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'SplitPanel'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _splitPanel<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'SplitPanel'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'分隔区块'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/errorPage'</span><span class="token punctuation">,</span>
      component<span class="token punctuation">:</span> Main<span class="token punctuation">,</span>
      redirect<span class="token punctuation">:</span> <span class="token string">'noredirect'</span><span class="token punctuation">,</span>
      meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'错误页面'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token string">'icon-error'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page401'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _401<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'page401'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'401'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page403'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _403<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'page403'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'403'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page404'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _404<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'page404'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'404'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'page500'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> _500<span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'page401'</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'500'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> redirect<span class="token punctuation">:</span> <span class="token string">'/404'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token comment">//...</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><p>创建路由完毕后，刷新页面，我们发现左侧根据路由生成了想要的页面，我们再次添加一个路由为错误页面</p> <p><img src="/vue-admin/doc/assets/img/addRouter.bf72a0cc.jpg" alt="An Image"></p> <p>到此我们就完成了基本项目的构建，下一章节我们将会利用已经构建好的图标组件来组装我们的首页。</p> <h2 id="组装首页图表"><a href="#组装首页图表" aria-hidden="true" class="header-anchor">#</a> 组装首页图表</h2> <p>图表我们使用<a href="https://echarts.baidu.com/index.html" target="_blank" rel="noopener noreferrer">echarts<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,之前已经封装了一部分图表，这里咱们直接填充</p> <p>填充完首页图表，另外新建三个演示图表，完成后如下图</p> <p><img src="/vue-admin/doc/assets/img/index.91502a2d.jpg" alt="An Image"></p> <h2 id="来撸一个增删改查"><a href="#来撸一个增删改查" aria-hidden="true" class="header-anchor">#</a> 来撸一个增删改查</h2> <p>后台管理最常见的莫过于树结构、列表、表单增删改查，为此特意实现一个综合案例的增删改查</p> <p>再example文件夹中创建一个vue组件，这个文件夹会引用根据业务提炼出的layout布局，mixin混入，及小组件的拼装，下面一步步讲解</p> <p>参考<a href="https://github.com/wangbin3162/vue-admin/blob/master/src/views/example/TableExample.vue" target="_blank" rel="noopener noreferrer">源码<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>来查看具体的插槽插入位置</p> <h3 id="_1-创建基本组件"><a href="#_1-创建基本组件" aria-hidden="true" class="header-anchor">#</a> 1.创建基本组件</h3> <p>创建一个TableExample放置于example中，并添加至路由表,由于通用样式已经写好并注入到基础组件中因此不需要再编写样式。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>TableExample<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'TableExample'</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>添加完后应该是这样的</p> <p><img src="/vue-admin/doc/assets/img/table00.f1248c9a.jpg" alt="An Image"></p> <p>重点来了，这个文件会引入不少自定义的 <strong>布局组件</strong> 布局组件参考组件解析</p> <p>我们先引入一个mixin.js 这个js包含了基础的拼装组件、公共的自定义方法和默认的数据等</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>layout</span> <span class="token attr-name">content-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>栏目列表<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>layout</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> commonMixin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../common/js/mixin.js'</span>

  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'TableExample'</span><span class="token punctuation">,</span>
    mixins<span class="token punctuation">:</span> <span class="token punctuation">[</span>commonMixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_2-插入第一个布局层layout"><a href="#_2-插入第一个布局层layout" aria-hidden="true" class="header-anchor">#</a> 2.插入第一个布局层Layout</h3> <p>如上引入layout后默认就会生成一个布局，这个布局非常简单</p> <p><img src="" alt="An Image"></p> <p>这个帮你创建了一个条件-列表页面并生成了若干插槽，并可以配置列表显示文字为‘栏目列表’,为了完整演示，我们给这个实例再增加一个树形结构
即再layout中添加一个have-tree我们看看会发生什么</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>layout</span> <span class="token attr-name">have-tree</span> <span class="token attr-name">content-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>栏目列表<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>layout</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><img src="/vue-admin/doc/assets/img/table03.a4b02882.png" alt="An Image"></p> <p>此时页面里有三个插槽，我们只要往对应插槽中插入即可</p> <h3 id="_3-插入树插槽"><a href="#_3-插入树插槽" aria-hidden="true" class="header-anchor">#</a> 3.插入树插槽</h3> <p>插入树插槽</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tree-bar</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tree<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tree<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:tree-data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>treeData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@current-change</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handTreeCurrentChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tree-bar</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>插入后如需要监听当前节点选中后做什么操作则可以监听<code>@current-change</code> 案例演示只log当前节点</p> <p>这里插入一个知识点，由于数据都为前后分离，这里所有的数据都是用 <a href="https://easy-mock.com/login" target="_blank" rel="noopener noreferrer">easy-mock<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 模拟出来</p> <p>这里配置请求后返回树节点</p> <h3 id="_4-插入查询条件"><a href="#_4-插入查询条件" aria-hidden="true" class="header-anchor">#</a> 4.插入查询条件</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-bar</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:is-opended</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>filterOpened<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商品名称<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-item</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>店铺名称<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.shop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-item</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商家地址<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.address<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-item</span><span class="token punctuation">&gt;</span></span>
       <span class="token comment">&lt;!--添加查询按钮位置--&gt;</span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-item</span> <span class="token attr-name">:show-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:is-opended</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>filterOpened<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@reset-query</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>resetQuery<span class="token punctuation">&quot;</span></span>
                    <span class="token attr-name">@search-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleFilter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@filter-toggle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>filterOpened=!filterOpened<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-item</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商品种类<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.category<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-item</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>filter-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商品描述<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.desc<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-item</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>filter-bar</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>插入后如下图</p> <p><img src="" alt="An Image"></p> <p><code>:is-opended=&quot;filterOpened&quot;</code> 用来控制查询条件的展开和收起，需要添加两个事件来监听查询<code>@search-click=&quot;handleFilter&quot;</code>
和重置<code>@reset-query=&quot;resetQuery&quot;</code>按钮的点击</p> <h3 id="_5-插入按钮组和表格和分页"><a href="#_5-插入按钮组和表格和分页" aria-hidden="true" class="header-anchor">#</a> 5.插入按钮组和表格和分页</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>    <span class="token comment">&lt;!--ctrl插入--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button-bar</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>ctrl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:optCode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{add:true,modify:true,remove:true}<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">@handleCreate</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleCreate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@handleEdit</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleEdit<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">@handleCheck</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@handleDelete</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleDelete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button-bar</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--列表table--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table-box</span> <span class="token attr-name">@resize-height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>_resizeTableHeight<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">highlight-current-row</span> <span class="token attr-name">border</span>
                <span class="token attr-name">v-loading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listLoading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:max-height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tabMaxSize<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">@row-dblclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleRowDoubleClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@current-change</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleCurrentRowChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!--table内容省略...--&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table-box</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination-bar</span> <span class="token attr-name">:current-page</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.page<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:total</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>total<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:page-size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>listQuery.size<span class="token punctuation">&quot;</span></span>
                    <span class="token attr-name">@size-change</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleSizeChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@current-change</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleCurrentChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pagination-bar</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>插入后如下</p> <p><img src="/vue-admin/doc/assets/img/table04.e0cd24ae.png" alt="An Image"></p> <p>此时需要依次对插入的按钮组做事件监听，表格的数据来源也需要初始化，pagination-bar复制粘贴即可，对应需要的时间及data都已在mixin.js中封装。</p> <h3 id="_8-插入编辑页"><a href="#_8-插入编辑页" aria-hidden="true" class="header-anchor">#</a> 8.插入编辑页</h3> <p>编辑页借助了抽屉组件drawer,使用见组件解析</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>    <span class="token comment">&lt;!--编辑页--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogFormVisible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogStatus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:btn-status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>btnStatus<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">@on-create</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>createData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@on-update</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>updateData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>60%<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mask-close</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--添加form表单--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer-box</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogStatus!=='check'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!--嵌套的表格--&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>goods<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dataForm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>120px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">status-icon</span>
                 <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>rules<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商品名称<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>goods.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">clearable</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入商品名称<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>店铺名称<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>shop<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>goods.shop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">learable</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入店铺名称<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商家地址<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>address<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>goods.address<span class="token punctuation">&quot;</span></span> <span class="token attr-name">learable</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请输入商家地址<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商品种类<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>category<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>goods.category<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>请选择商品种类<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>零食<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>零食<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>日用品<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>日用品<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-select</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>商品描述<span class="token punctuation">&quot;</span></span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>desc<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>textarea<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>goods.desc<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer-box</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!--查看显示列表--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>drawer-box</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>display<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>商品名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>店铺名称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.shop }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>商品类型<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.category }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>商品类型<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.address }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-row</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>24<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span> <span class="token attr-name">blod</span><span class="token punctuation">&gt;</span></span>商品描述<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>v-label</span><span class="token punctuation">&gt;</span></span>{{ goods.desc }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>v-label</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-col</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-row</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer-box</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>drawer</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><p><img src="/vue-admin/doc/assets/img/table05.6899fc34.png" alt="An Image"></p> <p>抽屉组件包含抽屉的box，根据dialogStatus来区分是哪种类型的编辑窗口，check查看，create新增，update编辑，对应默认插槽插入对应内容。</p> <h2 id="完成一个功能实现"><a href="#完成一个功能实现" aria-hidden="true" class="header-anchor">#</a> 完成一个功能实现</h2> <p>至此，我们完成了一个基础模块的增加和实现，对于部分引用到的组件、资源和一些常用的第三方库的介绍和解释请继续看下一章。</p></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2/11/2019, 5:56:38 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/vue-admin/doc/guide/base.html" class="prev">
          一、基本准备
        </a></span> <span class="next"><a href="/vue-admin/doc/guide/component.html">
          三、组件解析
        </a>
        →
      </span></p></div> </div> <!----></div></div>
    <script src="/vue-admin/doc/assets/js/app.d64942cb.js" defer></script><script src="/vue-admin/doc/assets/js/3.1009c37b.js" defer></script>
  </body>
</html>
